Documentation For CreDesign - Personal Portfolio HTML Template

Inrtoduction

CreDesign

CreDesign - Personal Portfolio HTML Template

Created : 18/06/2023
By : Thememarch
Email : thememarch@gmail.com

Thank you for purchasing CreDesign - Personal Portfolio HTML Template. If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form or put a ticket at Support Center .
Thankyou so much!

HTML Structure

The html template uses Latest HTML5 tags. This theme is a responisve layout with 4 column Support column. All of the information in content area is nested within a class and comes with predefined classes.


                    
                        <section class="about">

                        <div class="container">

                            <div class="row">

                                <div class="col-12">

                                    <div class="row align-items-center">

                                        <div class="about-image-col col-12 col-lg-6 text-center">

                                            <div class="img-overlay mx-auto mx-lg-0">

                                                <img class="img-fluid" src="img/about.png" alt="about image">

                                            </div>

                                        </div>

                                        <div class="about-text-col col-12 col-lg-6">

                                            <div class="about-text-top">

                                                <div class="section-heading">

                                                    <div class="sub-heading d-flex align-items-center">

                                                        <img src="img/orangeDot.png" alt="orange-dot">

                                                        <p>About Me</p>

                                                    </div>

                                                    <h2 class="black-color line-height-3 h2">

                                                        I Can Design Anything You Want

                                                    </h2>

                                                </div>

                                                <p class="secondary-black line-height-7 mt-20">

                                                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo

                                                    minus id quod maxime placeat facere possimus, omnis voluptas assumenda est,

                                                    omnis

                                                    dolor repellendus. Temporibus autem quibusdam et aut officiis. Nam libero

                                                    tempore,

                                                    cum soluta nobis est eligendi optio cumque nihil impedit.

                                                </p>

                                            </div>

                                            <div class="row row-mobile-margin gy-3 gy-sm-0 mt-50">

                                                <div class="col-12 col-sm-6 col-lg-6 d-flex align-items-center">

                                                    <div class="mr-10">

                                                        <img src="img/aboutIconOne.png" alt="about icon one">

                                                    </div>

                                                    <div class="about-complete-project">

                                                        <h4 class="fw-700 orange-color h4"><span class="counter">350</span>+</h4>

                                                        <h4 class="fw-500 black-color h4">Complete Project</h4>

                                                    </div>

                                                </div>

                                                <div class="col-12 col-sm-6 col-lg-6 d-flex align-items-center">

                                                    <div class="mr-10">

                                                        <img src="img/aboutIconTwo.png" alt="about icon two">

                                                    </div>

                                                    <div class="about-years-experience">

                                                        <h4 class="fw-700 orange-color h4"><span class="counter">16</span>+</h4>

                                                        <h4 class="fw-500 black-color h4">Year of experience</h4>

                                                    </div>

                                                </div>

                                            </div>

                                            <div data-aos="fade-up" data-aos-delay="0" data-aos-duration="1500"

                                                class="row flex-column row-mobile-margin mt-50">

                                                <div class="col-12 mb-0 mb-20 ">

                                                    <div class="row">

                                                        <div class="col-12 col-sm-6 col-lg-6 d-flex align-items-center">

                                                            <i class="fa-regular fa-square-check mr-10 h6 orange-color"></i>

                                                            <p>Work simple and cline design</p>

                                                        </div>

                                                        <div class="col-12 col-sm-6 col-lg-6 d-flex align-items-center">

                                                            <i class="fa-regular fa-square-check mr-10 h6 orange-color"></i>

                                                            <p>Web Design Full stack</p>

                                                        </div>

                                                    </div>

                                                </div>

                                                <div class="col-12">

                                                    <div class="row">

                                                        <div class="col-12 col-sm-6 col-lg-6 d-flex align-items-center">

                                                            <i class="fa-regular fa-square-check mr-10 h6 orange-color"></i>

                                                            <p>New idea and user friendly design</p>

                                                        </div>

                                                        <div class="col-12 col-sm-6 col-lg-6 d-flex align-items-center">

                                                            <i class="fa-regular fa-square-check mr-10 h6 orange-color"></i>

                                                            <p>Unlimited Revisions</p>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                            <a data-aos="fade-up" data-aos-delay="100" data-aos-duration="1500"

                                                class="btn btn_effect home-banner-btn orange-btn mt-50" href="resume.html"><span

                                                    class="position-relative z-1">Download My CV</span>

                                            </a>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </section>

CSS Files and Structure

Mainly three main CSS files are used in this theme. The first one bootstrap.min.css, second one is style.css which for this template and third one is responsive.css to control responsive layouts.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Color Schemes

Using CSS Variables

For Color Schemes we have created CSS variables in style.css file. If you want to use a color you only need to change the value of the CSS variables as shown Below.

Change Logo & favicon

Change Logo

We have used two logo, first one is for dark background and second one is for light background.

Change first logo(For Light Background): Replace the existing logo file (Logo.png) with your logo file in root/img folder. Name and file type of your logo should be the same of the existing logo.

Change second logo(For Dark Background): Replace the existing logo file (LogoWhite.png) with your logo file in root/img folder. Name and file type of your logo should be the same of the existing logo.

Change Favicon

Replace the existing favicon.ico file with your own favicon.ico file in root/img folder.

Change Fonts

We have used Jost and Jost (google fonts) in the template.

To change the fonts:

Add the new font to your HTML file using the link tag. Place the link tag in the head section of your HTML file.

Then update your CSS file to use the new font by changing the "font-family" property for the appropriate selectors.

Jquery and javascript

This theme imports three types of Javascript files.

jQuery
Custom scripts (main.js)
Some plugins

jQuery is a Javascript library that greatly reduces the amount of code that you must write.
Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.

In addition to the custom scripts, I have implemented few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method

Google Map Settings

We have used embed code for the map.

You can go to the google maps and get the embed code for your location.

Sources and Credits

Fonts Used int the template are google fonts, you can find them on Google Fonts API

Fonts Used are :

Jost

Sliders Used Are :

Owl Carousel

Every Code is properly commented for Editing Ease.

Icons Used are :

Fontawsome Icons
https://fortawesome.github.io/Font-Awesome/

Support

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.

Submit a Ticket at Ticksy Forum : thememarch.com

Email Us at : thememarch@gmail.com